<template>
  <view class="talent-board">
    <!-- 选项卡 -->
    <view class="tabs">
      <text
        :class="['tab', activeTab === 'talent' ? 'active' : '']"
        @click="switchTab('talent')"
      >
        人才榜
      </text>
      <text
        :class="['tab', activeTab === 'company' ? 'active' : '']"
        @click="switchTab('company')"
      >
        公司
      </text>
      <text
        :class="['tab', activeTab === 'industry' ? 'active' : '']"
        @click="switchTab('industry')"
      >
        行业
      </text>
    </view>

    <!-- 信息卡列表 -->
    <view class="info-list">
      <!-- 人才榜 -->
      <view v-if="activeTab === 'talent'" class="talent-list">
        <view class="info-card" v-for="(item, index) in talentList" :key="index">
          <view class="job-top">
            <image src="https://zhimao.shengdunyun.net/uploads/wangeditor/20250308/67cbf1b8b89f9.png"></image>
            <view class="job-header">
              <text class="job-title">{{ item.name }} {{ item.position }}</text>
              <text class="job-info">{{ item.experience }} {{ item.education }} {{ item.salary }} {{ item.age }}</text>
            </view>
          </view>
          <view class="job-details">
            <text class="job-company">{{ item.company }} · {{ item.role }}</text>
            <text class="job-date">{{ item.date }}</text>
          </view>
          <text class="job-expectation">求职期望：{{ item.expectation }}</text>
          <view class="job-description">
            <text v-for="(resp, i) in item.description" :key="i" class="description-item">
              {{ resp }}
            </text>
          </view>
          <view class="action-buttons">
            <view class="invite-button" @click="inviteToInterview(item)">
              <text>邀请面试</text>
            </view>
            <view class="delete-button" @click="deleteCard('talent', index)">
              <text>×</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 公司 -->
      <view v-if="activeTab === 'company'" class="company-list">
        <view class="info-card" v-for="(item, index) in companyList" :key="index">
          <text class="company-name">{{ item.name }}</text>
          <text class="job-title">{{ item.jobTitle }}</text>
          <text class="details">{{ item.experience }} | {{ item.education }} | {{ item.salary }} | {{ item.age }}</text>
          <view class="job-description">
            <text>{{ item.description }}</text>
          </view>
          <view class="action-buttons">
            <view class="invite-button" @click="inviteToInterview(item)">
              <text>邀请面试</text>
            </view>
            <view class="delete-button" @click="deleteCard('company', index)">
              <text>×</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 行业 -->
      <view v-if="activeTab === 'industry'" class="industry-list">
        <view class="info-card" v-for="(item, index) in industryList" :key="index">
          <text class="industry-name">{{ item.name }}</text>
          <text class="job-title">{{ item.jobTitle }}</text>
          <text class="details">{{ item.experience }} | {{ item.education }} | {{ item.salary }} | {{ item.age }}</text>
          <view class="job-description">
            <text>{{ item.description }}</text>
          </view>
          <view class="action-buttons">
            <view class="invite-button" @click="inviteToInterview(item)">
              <text>邀请面试</text>
            </view>
            <view class="delete-button" @click="deleteCard('industry', index)">
              <text>×</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: "talent", // 当前选中的选项卡
      talentList: [
        {
          name: "填姓名",
          position: "Java工程师",
          experience: "3年",
          education: "本科",
          salary: "6-10k",
          age: "28岁",
          company: "佛山某某某有些公司",
          role: "工程师",
          date: "2020.01-2024-11",
          expectation: "java",
          description: ["1.负责什么工作内容", "2.负责什么工作内容", "3.负责什么工作内容"],
        },
        // 更多人才榜数据...
      ],
      companyList: [
        {
          name: "佛山某某某有些公司",
          jobTitle: "工程师",
          experience: "3年",
          education: "本科",
          salary: "6-10k",
          age: "28岁",
          description: "1. 负责什么工作内容？2. 负责什么工作内容？3. 负责什么工作内容？",
        },
        // 更多公司数据...
      ],
      industryList: [
        {
          name: "计算机服务",
          jobTitle: "工程师",
          experience: "3年",
          education: "本科",
          salary: "6-10k",
          age: "28岁",
          description: "1. 负责什么工作内容？2. 负责什么工作内容？3. 负责什么工作内容？",
        },
        // 更多行业数据...
      ],
    };
  },
  methods: {
    // 切换选项卡
    switchTab(tab) {
      this.activeTab = tab;
    },
    // 邀请面试
    inviteToInterview(item) {
      uni.showToast({
        title: `邀请 ${item.name} 面试`,
        icon: "none",
      });
    },
    // 删除卡片
    deleteCard(type, index) {
      if (type === "talent") {
        this.talentList.splice(index, 1);
      } else if (type === "company") {
        this.companyList.splice(index, 1);
      } else if (type === "industry") {
        this.industryList.splice(index, 1);
      }
      uni.showToast({
        title: "删除成功",
        icon: "none",
      });
    },
  },
};
</script>

<style scoped>
.talent-board {
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.tabs {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.tab {
  padding: 10px;
  font-size: 16px;
  color: #666;
  cursor: pointer;
}

.tab.active {
  color: #007aff;
  border-bottom: 2px solid #007aff;
}

.info-list {
  margin-bottom: 20px;
}

.info-card {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 10px;
}

.job-top {
  display: flex;
}

.job-top image {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}

.job-header {
  margin-bottom: 10px;
}

.job-title {
  font-size: 18px;
  font-weight: bold;
  display: block;
}

.job-info {
  font-size: 14px;
  color: #555;
  display: block;
}

.job-details {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.job-company {
  font-size: 14px;
  color: #333;
}

.job-date {
  font-size: 12px;
  color: #777;
}

.job-description {
  font-size: 14px;
  color: #333;
  display: block;
  padding: 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #ebebeb;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.invite-button {
  color: #2f318b;
  text-align: left;
  cursor: pointer;
}

.invite-button text {
  font-size: 14px;
}

.delete-button {
  color: #999;
  font-size: 20px;
  cursor: pointer;
}
</style>